<template>
    <div class="adIndex">
        <div :class="['flex',ishover]" @mouseleave="unHoverBug" @mouseenter="hoverBug" @mousedown="longAnBug" v-if="isCanSubBug" :style="{left:bugleft,top:bugtop}">
            bug
        </div>
        <div :class="['max_list',zhanweiclas]">
            <div :class="['left_list',zhanweiclas]">
                <div class="yypt">我爱报销</div>
                <span @click="showorhid" class="el-icon-arrow-right" v-if="!jiantou"></span>
                <span @click="showorhid" class="el-icon-arrow-left" v-if="jiantou"></span>
                <div class="ss" :style="{overflow:!jiantou?'hidden':'initial'}">
                    <div class="inputlef" v-if="isCanSubBug">
                        <i class="el-icon-sort"></i>
                    </div>
                    <div>
                        <input type="text" placeholder="搜索菜单" @focus="showSerchList=true" @blur="showSerchList=false" v-model="search" @keyup="aaa" maxlength="10"/>
                        <ul :style="{display:showSerchList?'block':'none'}">
                            <li v-for="(item, index) in findData" :key="index" @mousedown="go(item)">
                                {{ item.title }}
                            </li>
                        </ul>
                        <div class="icon" style="float:left">
                            <i class="iconfont iconsousuo"></i>
                        </div>
                    </div>
                </div>
                <List :data="leftList" pl="25"></List>
            </div>
            <div :class="[rightzhanwei]">
                <MainTop type='text' @opOrCl="abc" :nowUrl="nowUrl" style="width:100%;" />
                <router-view style="width:100%;"></router-view>
              </div>
        </div>
        <div :class="['left_bottom',zhanweiclas]">
            <img src="../../assets/images/082f8a1.svg" alt="" />
            <span class="welcome">欢迎您,管理员</span>
        </div>
        <!-- BUG提交对话框 -->
        <el-dialog :visible.sync="BugDialogVisible" width="80%" center :close-on-click-modal="false">
            <template #title>
                <span style="font-size:22px">提交bug</span>
            </template>
            <div class="bug_warp">
                <div class="bug_title">时间:{{ nowTime }}</div>
                <div class="bug_title">页面:{{ nowUrl }}</div>
            </div>
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="未解决" name="1">
                    <el-table :data="tableData1" style="width: 100%" border>
                        <el-table-column prop="date" label="提交时间"> </el-table-column>
                        <el-table-column prop="name" label="描述"> </el-table-column>
                        <el-table-column prop="address" label="期望解决"> </el-table-column>
                        <el-table-column prop="address" label="责任人"> </el-table-column>
                        <el-table-column prop="address" label="状态"> </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="全部" name="2">
                    <el-table :data="tableData2" style="width: 100%" border>
                        <el-table-column prop="date" label="提交时间"> </el-table-column>
                        <el-table-column prop="name" label="描述"> </el-table-column>
                        <el-table-column prop="address" label="期望解决"> </el-table-column>
                        <el-table-column prop="address" label="状态"> </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <el-input type="textarea" :rows="2" placeholder="您的问题" v-model="textarea1" style="margin-bottom:30px;margin-top:30px;"></el-input>
            <el-input type="textarea" :rows="2" placeholder="您的期望" v-model="textarea2"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="BugDialogVisible = false">取 消</el-button>
                <el-button type="danger" @click="commitBug" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import MainTop from "../../components/MainTop";
import List from "../../components/list";
import getKeyToken from "../../../public/API/getKeyToken";
import config from "../../../public/config";
import {get,post} from '../../../public/API/query'
export default {
    name: "AdIndex",
    components: {
        MainTop,
        List,
    },
    data() {
        return {
            showSerchList:false,
            leftList: [],
            delList: [],
            unDelList: [],
            username: "",
            nowUrl: "",
            arr: "",
            search: "",
            findData: [],
            isCanSubBug: false,
            BugDialogVisible: false,
            //问题
            textarea1: "",
            //期望
            textarea2: "",
            activeName: "1",
            tableData1: [],
            tableData2: [],
            nowTime: "",
            isAnx:false,
            bugleft:'95%',
            bugtop:'94%',
            ishover:'',
            jiantou:true,
            zhanweiclas:"",
            rightzhanwei:'right'
        };
    },
    watch: {
        $route: {
            handler(val, oldval) {
                this.nowUrl = val.path;
            },
        },
    },
    mounted() {
      
    },
    methods: {
        //显示隐藏左侧列表
        showorhid(){
            this.jiantou = !this.jiantou
            this.zhanweiclas=="left_shrink"?
            this.zhanweiclas='':
            this.zhanweiclas='left_shrink'
            this.rightzhanwei=='right'?
            this.rightzhanwei='right2':
            this.rightzhanwei='right'
        },
        //显示/隐藏红色数据开关
        abc(data) {
            if (data) {
                this.leftList = this.delList;
            } else {
                this.leftList = this.unDelList;
            }
            this.isCanSubBug = !data;
        },
        //添加字段
        findUpPid(item, pid, action) {
            for (let key in item) {
                if (item[key].id == pid) {
                    item[key].data_url = action;
                } else {
                    this.findUpPid(item[key]._child, pid, action);
                }
            }
        },
        //找到title为首页的数据
        addRouter(item) {
            for (let key in item) {
                if (item[key].title == "首页") {
                    this.findUpPid(this.leftList, item[key].pid, item[key].action);
                } else {
                    this.addRouter(item[key]._child);
                }
            }
        },

        //处理要变成红色的数据
        delNull(data) {
            for (const key in data) {
                if (this.arr.indexOf(data[key].title) != -1) {
                    data.splice(key, 1);
                    this.delNull(data);
                } else {
                    this.delNull(data[key]._child);
                }
            }
        },
        //拷贝
        // copy(copy,data){
        //   for(const key in data){
        //     copy[key] = {...data[key]}
        //     if (data[key]._child) {
        //       this.copy(copy[key]._child,data[key]._child)
        //     }
        //   }
        // },
        
        //搜索输入按下键盘时触发
        aaa() {
            var that = this;
            that.findData = [];
            function findSearch(data) {
                for (const i in data) {
                    if (data[i].title.search(that.search) != -1 && data[i].data_url && that.search != "") {
                        var a = { title: data[i].title, url: data[i].data_url ,pid:data[i].pid};
                        that.findData.push(a);
                        findSearch(data[i]._child);
                    } else {
                        findSearch(data[i]._child);
                    }
                }
            }
            findSearch(this.leftList);
        },
        //点击搜索列表
        go(val) {
            val.url = '/adIndex/' + val.url
            var topList = config.get('topHis')
            var beyond = config.get('beyond')
            var menu = config.get('menu')
            ;(function findID(data){
                for (const i in data) {
                    if (data[i].id == val.pid) {
                        val.icon = data[i].coin
                    }else{
                      data[i]._child?
                        findID(data[i]._child):
                        ""
                    }
                }
            })(menu)
            var hasHis = topList.findIndex(item=>{
                return item.url === val.url
            })
            window.sessionStorage.setItem('abxnowhis',JSON.stringify(val))
            var hasBey = beyond.findIndex(item=>{
                return item.url === val.url
            })
            if (hasBey == -1 && topList.length >= 7 && hasHis == -1) {
                config.setbeyond(val)
            }
            if (hasHis == -1 && topList.length < 7) {
                config.setTopHis(val)
            }
            this.$router.push(val.url);
        },
        //提交
        submit() {
            this.$message.success('提交成功')
            this.BugDialogVisible = false
        },
        //提交bug
        commitBug() {
            this.textarea1 = "";
            this.textarea2 = "";
            this.$message.success(`提交成功,时间${this.nowTime},页面${this.nowUrl}`)
            this.BugDialogVisible = false
        },
        //鼠标移入
        hoverBug(){
            this.ishover = 'opOne'
        },
        //鼠标离开
        unHoverBug(){
            this.ishover = ''
        },
        //长按
        longAnBug(event) {
            document.onmousemove = e=>{
                this.ishover = 'opOne'
                if(e.clientX+event.target.clientWidth-event.layerX>=document.body.offsetWidth){
                    this.bugleft = document.body.offsetWidth-event.target.clientWidth + 'px'
                }else{
                    this.bugleft = e.clientX - event.layerX + 'px'
                }
                if(e.clientX-event.layerX<=0){
                    this.bugleft = 0
                }
                if(e.clientY+event.target.clientHeight-event.layerY>=document.body.offsetHeight){
                    this.bugtop = document.body.offsetHeight-event.target.clientHeight + 'px'
                }else{
                    this.bugtop = e.clientY - event.layerY + 'px'
                }
                if(e.clientY-event.layerY<=0){
                    this.bugtop = 0
                }
            }
            document.onmouseup = (e)=>{
              if(e.clientX == event.clientX && e.clientY == event.clientY){
                  this.BugDialogVisible = true;
                  const time = new Date();
                  const now =
                    time.getFullYear() +
                    "年" +
                    (time.getMonth() + 1) +
                    "月" +
                    time.getDate() +
                    "日 " +
                    time.getHours() +
                    ":" +
                    time.getMinutes();
                  this.nowTime = now
                  this.nowUrl = this.$route.path
              }
              document.onmousemove = null
            }
        }
    },
    created() {
        if ( !window.localStorage.getItem('r-ad-menu') || !window.localStorage.getItem('r-ad-userinfo')) {
          this.$router.push('/login')
        }
        //获取用户信息
        var userinfo = config.get("userInfo");
        if (!userinfo) {
            this.$router.push("/login");
            return;
        }
        this.username = userinfo.username;
        //获取不显示的列表
        this.arr = config.get("sys").unsetMnu;
        //获取列表数据
        if(config.get("menu")){
            var menu = [...config.get("menu")];
            this.delList = [...menu];
            this.unDelList = [...menu];
            this.delList = JSON.parse(JSON.stringify(menu));
        }
        this.delNull(this.delList)
        if (config.get("sys").isMenuOpen) {
            this.leftList = this.unDelList;
        } else {
            this.leftList = this.delList;
        }
        //获取是否全部显示的状态
        this.isCanSubBug = config.get("sys").isMenuOpen;
        //获取当前路由
        var routes = this.$router.options.routes;
        //循环找名称为adIndex的路由
        var adIndex = routes.find((item) => {
            return item.name == "adIndex";
        });
        //创建新数组
        var arrRouter = [];
        //创建方法获取列表数据的data_url字段
        function dataurl(menu) {
            for (let i = 0; i < menu.length; i++) {
                if (menu[i].data_url) {
                    //如果有data_url字段 那么添加到arr数组
                    arrRouter.push(menu[i].data_url);
                } else {
                    //没有就再次调用方法传入当前数据的子数据
                    if (menu[i]._child) {
                        dataurl(menu[i]._child);
                    }
                }
            }
        }
        //如果有menu 那么调用方法
        if (menu) {
            dataurl(menu);
        }
        //将数组中的数据转成对象
        arrRouter.forEach((value, index) => {
            arrRouter[index] = {
                path: value,
                component: () => import("../" + value),
            };
        });
        //将arr合并到adIndex路由中
        if (adIndex.children.length < 10) {
            adIndex.children = adIndex.children.concat(arrRouter);
            this.$router.$addRoutes(routes);
        }
        //将数据传入列表
        //调用方法给列表添加跳转链接
        this.addRouter(this.leftList);
        var key = this.$router.app._route.query.key;
        var type = this.$router.app._route.query.sertype;
        if (key && type) {
            getKeyToken.keyGetToken(
                this.$router.app._route.query.key,
                type,
                (err, data) => {
                    if (err) {
                      console.log(data);
                    } else {
                        //将请求到的用户数据传入到config
                        config.setUserInfo(JSON.stringify(data.data.data));
                        get("index/index/getMenu",{},(res) => {
                            this.leftList = res.data.data;
                            this.addRouter(this.leftList);
                            config.setMenu(JSON.stringify(this.leftList));
                        });
                    }
                }
            );
        }
    },
};
</script>
<style lang="less" scoped>
.yypt {
    width: 100%;
    height: 60px;
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    background: #15a589;
    overflow: hidden;
}
.flex {
    width: 50px;
    height: 50px;
    position: fixed;
    text-align: center;
    bottom: 50px;
    right: 50px;
    background: red;
    color: #fff;
    z-index: 9999;
    line-height: 50px;
    border-radius: 50%;
    opacity: 0.5;
    user-select: none;
    cursor: pointer;
}

.opOne{
    opacity: 1;
}

.adIndex {
    width: 100%;
    height: 100%;
    position: relative;
}
.left_shrink{
    &::after{
        width: 0% !important;
    }
    img,.welcome{
        display: none;
    }
}
.left_list.left_shrink{
    width: 0% !important;
}
.max_list {
    &::after{
        content: "";
        position: absolute;
        left: 0;
        top: 60px;
        height: calc(~"100% - 60px");
        width: 15%;
        background:  #1a2226;
        transition: .3s;
    }
    position: relative;
    min-height: 100%;
    display: flex;
    .right {
       width: 85%;
    }
    .right2 {
       width: 100%;
    }
    .left_list {
        transition: .3s;
        width: 15%;
        background: #1a2226;
        z-index: 2;
        position: relative;
        .el-icon-arrow-right,
        .el-icon-arrow-right::before,
        .el-icon-arrow-left,
        .el-icon-arrow-left::before{
            font-size: 30px;
            position: fixed;
            left: 13%;
            top: 50%;
            color: #fff;
            z-index: 1999;
        }
        .el-icon-arrow-right,
        .el-icon-arrow-right::before{
            left: 0%;
            color: #000;
        }
        .ss {
            width: 90%;
            margin: auto;
            height: 40px;
            outline: none;
            padding: 10px 0 0 0;
            display: flex;
            position: relative;
            margin-bottom: 10px;
            .inputlef{
                position: inherit;
                color:red;
                margin:auto 0;
                width: 30px;
            }
            div{
                position: relative;
                width: 100%;
                box-sizing: border-box;
                ul {
                    position: relative;
                    background: #fff;
                    z-index: 101;
                    li {
                        padding-left: 5px;
                        box-sizing: border-box;
                        height: 25px;
                        line-height: 25px;
                        border-bottom: 1px solid #666;
                        cursor: pointer;
                        &:hover {
                            background: gainsboro;
                        }
                    }
                }
                input {
                    height: 30px;
                    outline: none;
                    padding-left: 5px;
                    background: #374850;
                    color: #666;
                    border: none;
                    width: 100%;
                    &:focus {
                        background: #fff;
                    }
                    &:focus + ul {
                        display: block;
                    }
                }
                .icon {
                    width: 30px;
                    height: 30px;
                    line-height: 30px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }
}
.left_bottom {
    position: fixed;
    height: 80px;
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: 0;
    z-index: 3;
    img {
        width: 25px;
        height: 25px;
        margin-right: 5px;
    }
    span {
        font: 16px bold;
        color: #fff;
        overflow: hidden;
    }
}
.bug_warp{
    display: flex;
    justify-content: space-around;
    margin-bottom:10px;
    .bug_title{
        font-weight: 600;
        font-size:16px;
    }
}
</style>
